<template>
  <div class="myInputNumber">
    <el-input-number
      :ref="inputNumberRef"
      :max="configDefault.max"
      :min="configDefault.min"
      :controls-position="configDefault.controlsPosition"
      :disabled="disabled"
      :placeholder="
        disabled
          ? ''
          : configDefault.placeholderLabel
      "
      v-model.lazy="childModel"
      @change="inputNumberChange(childModel)"
      @focus="inputFocus(childModel)"
      @blur="inputBlur(childModel)"
    ></el-input-number>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "myInputNumber",
  props: {
    //自定义ref
    inputNumberRef: {
      type: String,
      default() {
        return "vueInputNumber";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组数字框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model,
      configDefault: {
        controlsPosition: "right", // 控制按钮位置
        min: 0, // 设置计数器允许的最小值
        max: 9999999999999999, // 设置计数器允许的最大值
        placeholderLabel: "",
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal, objVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    inputNumberChange: function (newVal) {
      //在 Input 值改变时触发
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputFocus: function (newVal) {
      //在 Input 获得焦点时触发
      this.$emit("focusCallback", this.modelKey + "_" + this.which, newVal);
    },
    inputBlur: function (newVal) {
      //在 Input 失去焦点时触发
      this.$emit("blurCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style lang="less">
.myInputNumber {
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
}
</style>